<apes-card [apesTitle]="'待办汇总'" class="apes-todo-summary" [apesExtra]="extraTemplate">

  <!--汇总条件-->
  <div apes-row>
    <div apes-col [apesSpan]="2" *ngFor="let item of toDoTypeItem" class="todo-summary-condition">
      <!--      <apes-tag apesMode="checkable" [(apesChecked)]="item.checked" class="todo-summary-condition-name"-->
      <!--                (click)="checkChange(item.name)">{{item.name}}</apes-tag>-->
      <apes-tag [ngClass]="{'active':item.checked}" class="todo-summary-condition-name"
                (click)="checkChange(item.name)">{{item.name}}</apes-tag>
    </div>
  </div>

  <!--汇总详情-->
  <div apes-row>
    <div apes-col [apesSpan]="24" class="todo-summary-details">
      <ng-container *ngIf="toDoList.length >0 && !isLoading">
        <div *ngFor="let list of toDoList">
          <div apes-col [apesSpan]="6">
            <div class="todo-summary-details-main">
              <div class="todo-summary-details-title">{{list.documentTypeName}}</div>
              <div class="todo-summary-details-detail">

                <div *ngFor="let item of list['list']" class="todo-summary-details-list"
                     (click)="checkDtailsList(list,item)">
                  <div>
                    {{item['statusName']}}
                  </div>
                  <div>
                    {{item['summary']}}(
                    <span style="color: rgba(249,126,124,0.85)">{{item['timeOut']}}</span>
                    /
                    <span style="color: rgba(254,177,95,0.85)">{{item['warning']}}</span>
                    )
                  </div>
                </div>

                <apes-drawer [apesClosable]="false" [apesWidth]="'45vw'" [apesVisible]="openDrawer"
                             apesPlacement="right"
                             (apesOnClose)="closeDrawer()">

                  <apes-table #basicTable
                              [apesData]="drawerData"
                              [apesShowPagination]="false"
                              class="todo-summary-details-table"
                              apesSize="small"
                              apesBordered>
                    <thead>
                    <tr>
                      <th style="width: 15%;" class="todo-th">单号</th>
                      <th style="width: 15%;" class="todo-th">待办节点</th>
                      <th style="width: 20%;" class="todo-th">倒计时</th>
                      <th style="width: 10%;" class="todo-th">车牌</th>
                      <th style="width: 30%;" class="todo-th">备注</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let data of drawerData; let i = index;">
                      <td class="todo-td-l">
                        <span class="todo-td-business" (click)="selectData(data)">{{data.businessKey}}</span>
                      </td>
                      <td class="todo-td-c">
                        <span class="todo-td-tip">{{data.processType}}</span>
                        {{data.todoNode}}
                      </td>
                      <td class="todo-td-c"
                          [ngClass]="showTimeClass(data.expiredTime)"
                          [innerHTML]="showCountDown(data.expiredTime)"></td>
                      <td class="todo-td-c">{{data.carLicense}}</td>
                      <td class="todo-td-l">
                        <ul class="todo-td-ul">
                          <li *ngFor="let remark of data.contentData">{{remark}}</li>
                        </ul>
                      </td>
                    </tr>
                    </tbody>
                  </apes-table>

                </apes-drawer>


              </div>
            </div>
          </div>
        </div>
      </ng-container>
      <ng-container *ngIf="toDoList.length  == 0 && !isLoading">
        <apes-empty style="text-align: center"></apes-empty>
      </ng-container>
      <ng-container *ngIf="isLoading">
        <apes-spin apesSimple style="text-align: center;margin: 20px;"></apes-spin>
      </ng-container>
    </div>
  </div>


</apes-card>
<ng-template #extraTemplate>
  <div class="apes-todo-summary-refresh">
    <i apes-icon apesType="sync" (click)="getTodoList()"></i>
  </div>
</ng-template>
